<template>
	<view class="">
		

	<tx-pushview
		ref="maxTxPusher"
		class="maxTxPusher"
		:style="{ height: windowHeight }"
		pauseFps="3"
		pauseTime="15"
		:whiteness="whiteness"
		:ruddiness="ruddiness"
		:beauty="beauty"
		:beatyStyle="beautyStyle"
		videoEncodeGop="1"
		pauseImg=""
		:url="pushUrl"
		touchFocus="true"
		enableAEC="true"
		enableZoom="true"
		:frontCamera="frontCamera"
		:filterFileName="filterFileName"
		@statechange="onPush"
	></tx-pushview>
	<view class="">
		<uni-popup ref="popup"  type="bottom" class="unipopup"
		:mask="false" animation  background-color="#fff" safe-area:true> 
		<view class="hourList">
			  <scroll-view scroll-y style="height: 100%;">
			<view class="hourItem" v-for="(item,index) in 6" :key="index">
				<view class="itemInfo">
					<text class="rank">{{ item }}</text>
					<view class="userInfo">
						<view class="userAvatar">
							<image class="avatarImage" src="@/static/images/home/girl.png" mode="aspectFill"></image>
						</view>   
						<text class="user-name">Bess Wilkerson</text>
					</view>
					<text class="flow-count">163.0W</text>
				</view>
				<view class="line-box">
					<view class="line"></view>   
				</view>
			</view>
			</scroll-view>
		</view>
			
		</uni-popup>
		
		

		<view class="container" :style="{ height: windowHeight }">
			<view class="foot-content">
				<chatRoom id="chatRoom" ref="chatRoom" class="chat-room" :roomId="roomId"></chatRoom>
			</view>
			<view :class="['ui-row-between', 'ui-col-center',' head-box']">
				<view :class="['ui-row-between','live-message', 'ui-col-center']">
					<image src="https://mazhu-1251049911.cos.ap-guangzhou.myqcloud.com/png/22.png" class="live-head"></image>
					<view class="ui-col">
						<text :class="['ui-font-size13', 'ui-txt-white', 'roomName']">Rachel</text>
						<view class="watchNumber">
							<uni-icons type="eye-filled" size="13" color="rgba(255, 98, 98, 1)"></uni-icons>
							<text :class="['number', 'ui-txt-white']">12363</text>
						</view>
					</view>
					
				</view>
				<view :class="['exitButton', 'ui-center']" @click="exitRoom">
					<uni-icons type="closeempty" size="26" color="#ffffff"></uni-icons>
				</view>
			</view>
			<view class="hour-chart" >
				<image src="@/static/images/liveBar/flow.png" mode="" style="width: 30rpx; height: 30rpx"></image>
				<text :class="['ui-font-size13' ,'ui-txt-white']" @click="hourChart">Hour chart ></text>
			</view>
			<view class="ui-col"></view>
		
			<view class="countDownBox">
				<view class="countDown" v-if="showCount">
					<text class="count">
						{{countDown}}
					</text>
				</view>
			</view>
			
			
			<view class="start-box"  v-if="showStart">
				<view class="startItem">
					<text class="start" @click="startAll()" >开始直播</text>
				</view>
				
			</view>
			<view class="bottom-box">
				<view :class="['bottom' ,'ui-row-between' ,'ui-col-center']">
					<view :class="['fun-group', 'ui-center']" @click="switchCamera">
						<image src="@/static/images/liveBar/camera.png" class="fun-icon"></image>
					</view>
					<view :class="['fun-group' ,'ui-center','open-message']" @click="openSetMessage">
						<image src="@/static/images/liveBar/message.png" class="fun-icon"></image>
					</view>
					<view :class="['fun-group' ,'ui-center']" @click="setBeauty">
						<image src="@/static/images/liveBar/beauty.png" class="fun-icon"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="share" v-if="showModal == 1">
			<view class="ui-row-between share-top">
				<view class="ui-row ui-col-center">
					<text class="ui-font-size14 share-top-item">美颜</text>
				</view>
				<view class="" >
						<image src="@/static/images/liveBar/close_b.png" class="close-scene" @click="closeModal"></image>
				</view>
			
			</view>
			<view>
				<view class="ui-row-between share-item ui-col-center" @click="showModalClick(1)" :data-name="'style'">
					<text class="ui-font-size14 ui-txt-white">美颜风格</text>
					<text class="ui-font-size14 ui-txt-white">{{ beautyStyle == 0 ? '光滑' : '自然' }}</text>
				</view>
				<view class="ui-row-between share-item ui-col-center" @click="showModalClick(2)" :data-name="'beauty'">
					<text class="ui-font-size14 ui-txt-white">美颜级别</text>
					<text class="ui-font-size14 ui-txt-white">{{ beauty || '关闭' }}</text>
				</view>
				<view class="ui-row-between share-item ui-col-center" @click="showModalClick(3)" :data-name="'white'">
					<text class="ui-font-size14 ui-txt-white">美白级别</text>
					<text class="ui-font-size14 ui-txt-white">{{ whiteness || '关闭' }}</text>
				</view>
				<view class="ui-row-between share-item ui-col-center" @click="showModalClick(4)" :data-name="'ruddy'">
					<text class="ui-font-size14 ui-txt-white">红润级别</text>
					<text class="ui-font-size14 ui-txt-white">{{ ruddiness || '关闭' }}</text>
				</view>
			</view>
		</view>
		<view class="beautyNumber" v-if="showModal == 2">
			<view  class="top ui-row-between ui-col-center" >
				<text class="ui-font-size14 ui-col-center ui-txt-white" @click="cancel">取消</text>
				<text class="ui-font-size14 ui-col-center ui-txt-white" @click="save">保存</text>
			</view>
			<view   class="ui-col modal" >
				<scroll-view scroll-y="true" v-if="beautyType==1">
					<view class="share-item ui-center" :class="chooseIndex == index ? 'ui-bg-blue' : ''" 
					v-for="(item, index) in chooseList" :key="index" @click="setBeautyStyle(index)" :data-index="index">
						<text class="ui-font-size14 ui-txt-white">{{ item }}</text>
					</view>
				</scroll-view>
				<view v-if="beautyType!=1" class="showSlider" ref="showSlider"  >
					<slider :value="beautyNumber" :max="9" :min="0" @change="sliderChange" activeColor="#ff7f23" backgroundColor="#bfbfbf" block-color="#e94267" block-size="20" show-value/>
				</view>
			</view>
		</view>
		
	</view>
		</view>
</template>
<script>
const trtcPush = uni.requireNativePlugin('tx-push');
const txIm = uni.requireNativePlugin('TencentIM');
import { appId, appKey } from '@/common/app.js';
export default {
	data() {
		return {
			beautyNumber:null,
			beautyType:null,
			chooseList:[
				'光滑',
				'自然'
			],
			
			chooseIndex:null,
			showStart:true,
			showCount:false,
			countDown:3,
			filterFileName:"yinghong",
			frontCamera: true,
			showModal: null,
			windowHeight: 0,
			showHour: false,
			showSend: true,
			roomIdS: [666, 888, 686, 868],
			roomId: 868,
			players: [],
			hisId: null,
			userName: 'yangang',
			windowHeight: 0,
			role: 20,
			//美白级别
			whiteness: 9,
			//红润级别
			ruddiness: 5,
			//美颜级别
			beauty: 5,
			//美颜风格
			beautyStyle:0,
			mode: 'me', //大小窗口显示模式
			enable: false,
			lianmaiEnable: false,
			scene: 1,
			appId: appId,
			appKey: appKey,
			isFront: true,
			pushUrl: ""
		};
	},
	onLoad(params) {
		
		this.initPushUrl()
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		this.login()
	},
	onReady() {
		this.play();
	},
	onNavigationBarButtonTap() {
		this.$refs.maxTxPusher.stopPush();
		uni.navigateBack({
			delta: 1,
			animationType: 'pop-out',
			animationDuration: 200
		});
	},
onUnload(){
	console.log(55555);
	this.stopAll();
	this.closePusher()

},
onHide(){
	console.log(666666);
	this.stopAll();
	this.closePusher()
},
	methods: {  
		//登录
		login(){
			let isSuccess = txIm.initSDK({
					sdkAppID:appId,
					logLevel:0
				},result=>{
					console.log('initSDK',result);
				})
		
		},
		
	//美颜
		setBeautyStyle(index){
			this.chooseIndex=index
			//0 光滑
			//1 自然 
			//2 优图，由优图实验室提供，磨皮效果介于光滑和自然之间 
			this.beautyStyle=index
			this.showModal=1
		},
		save(){
			this.showModal=1
		},
		sliderChange(e){
			console.log(111,e.detail.value);
			this.beautyNumber=e.detail.value
			if(this.beautyType==2){
			this.beauty=this.beautyNumber 				
			}else if(this.beautyType==3){
				this.whiteness =this.beautyNumber
			}else{
				this.ruddiness=this.beautyNumber
			}
		},
		//退出直播间
		closePusher(){
			uni.$http.get('/app/anchor/lives/closeLive').then(res=>{
				console.log('关闭',res);
			})
		},
		//初始化推流
		initPushUrl(){
			uni.$http.get('/app/anchor/lives/initLiveRoom').then(res=>{
				console.log('初始化推流',res);
			})
		},
		closeModal() {
			this.showModal = null;
		},
		setBeauty() {			
			this.showModal=1
		},
		showModalClick(type){
			console.log('type',type);
				
			this.beautyType=type
			if(type==2){
			this.beautyNumber=	this.beauty 
				
			}else if(type==3){
				this.beautyNumber=this.whiteness 
			}else{
			this.beautyNumber=	this.ruddiness
			}
			console.log('beautyNumber',this.beautyNumber);
			setTimeout(()=>{
				this.showModal=2	
			},0)
			
		},
		exitRoom() {
			uni.navigateTo({
				url: '/pages/anchorConsole/anchorConsole'
			});
			this.stopAll();
			this.closePusher()
		},
		//打开小时榜
		hourChart() {
			  this.$refs.popup.open()
		},
		openSetMessage() {
			this.$refs.chatRoom.open();
		},
		switchCamera() {
			if (this.frontCamera) {
				this.frontCamera = false;
			} else {
				this.frontCamera = true;
			}
		},
		startAll() {
			console.log(11111111);
			//获取推流地址
			uni.$http.get(`/app/anchor/lives/getPushUrl`).then(res => {
				this.pushUrl = res.data
				this.showCount=true
				 const interval = setInterval(() => {
				        this.countDown--
				        if(this.countDown === 0) {
				          clearInterval(interval)
						  this.countDown=3
				          // 倒计时结束,做其他操作
						  this.showCount=false
						  this.showStart=false
						  this.$refs.maxTxPusher.startPushUrl((res) => {
						  				console.log(res);
						})
						}    
				      }, 1000)
			},
			err => {
				uni.showToast({
					title: '请求超时',
					icon: 'none'
				});
			}
			)
		
			
		},
		onPush(e) {
			var result = e.detail;
			console.log(result);
		},
		stopAll() {
			this.$refs.maxTxPusher.stopPreview();
			
			this.$refs.maxTxPusher.stopPush();
		},
		play() {
			trtcPush.setLicence({
				licenceURL: 'https://license.vod2.myqcloud.com/license/v2/1318679468_1/v_cube.license',
				key: 'ec0a6a0433e8bac373dd66d81166773a'
			});
			if (uni.getSystemInfoSync().platform == 'android') {
				let that = this;
				this.requestAndroidPermission(['android.permission.RECORD_AUDIO', 'android.permission.CAMERA']).then(
					function (resultObj) {
						for (var i = 0; i < resultObj.granted.length; i++) {
							var grantedPermission = resultObj.granted[i];
							console.log('已获取的权限：' + grantedPermission);
							if (grantedPermission == 'android.permission.RECORD_AUDIO') {
							} else if (grantedPermission == 'android.permission.CAMERA') {
								console.log('开启预览');
								that.$refs.maxTxPusher.startPreview();
							}
						}
						for (var i = 0; i < resultObj.deniedPresent.length; i++) {
							var deniedPresentPermission = resultObj.deniedPresent[i];
							console.log('拒绝本次申请的权限：' + deniedPresentPermission);
						}
						for (var i = 0; i < resultObj.deniedAlways.length; i++) {
							var deniedAlwaysPermission = resultObj.deniedAlways[i];
							console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
						}
					},
					function (error) {}
				);
				return;
			}

			this.$refs.maxTxPusher.startPreview();
		},

		requestAndroidPermission(permissionID) {
			return new Promise((resolve, reject) => {
				plus.android.requestPermissions(
					permissionID, // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
					function (resultObj) {
						resolve(resultObj);
					},
					function (error) {
						console.log('申请权限错误：' + error.code + ' = ' + error.message);
						resolve({
							code: error.code,
							message: error.message
						});
					}
				);
			});
		},
		
//选择分辨率
		chooseQuality() {
			var me = this;
			uni.showActionSheet({
				itemList: ['标清', '高清', '超清', '开启预览', '停止预览', '切换闪光灯', '截屏', '英雄', '云裳', '测试背景音乐', '停止背景音乐', '暂停推流', '继续推流'],
				success(res) {
					var index = res.tapIndex;
					if (index == 0 || index == 1 || index == 2) {
						me.$refs.maxTxPusher.setVideoQuality({
							quality: index + 1,
							adjustBitrate: false,
							adjustResolution: false
						});
					}

					if (index == 3) {
						me.$refs.maxTxPusher.startPreview();
					} else if (index == 4) {
						me.$refs.maxTxPusher.stopPreview();
					} else if (index == 5) {
						me.$refs.maxTxPusher.toggleTorch();
					} else if (index == 6) {
						me.$refs.maxTxPusher.snapshot((result) => {
							console.log(result);
							// uni.saveFile({
							// 	tempFilePath:result.path,
							// 	success:function (res) {
							// 		console.log(res);
							// 	},
							// 	fail:function(err) {
							// 		console.log(err);
							// 	}
							// });
						});
					} else if (index == 7) {
						me.filterFileName = 'yinghong.png';
					} else if (index == 8) {
						me.filterFileName = 'rixi.png';
					} else if (index == 9) {
						trtcPush.startPlayMusic(
							{
								path: 'http://mp3.9ku.com/mp3/555/554523.mp3',
								loopCount: 0,
								ID: 1,
								publish: true
							},
							(result) => {
								console.log(result);
							}
						);
					} else if (index == 10) {
						trtcPush.stopPlayMusic({
							ID: 1
						});
					} else if (index == 11) {
						me.$refs.maxTxPusher.pausePush();
					} else if (index == 12) {
						me.$refs.maxTxPusher.resumePush();
					}
				}
			});
		}
	},
	beforeCreate: function () {
		// #ifdef APP-PLUS-NVUE
		const domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: 'url("' + 'file:/' + plus.io.convertLocalFileSystemURL('_www/static/iconfont.ttf') + '")'
		});
		// #endif
	}
};
</script>

<style lang="scss" scoped>
	.maxTxPusher{		
		z-index: -1;
	}
	/* #ifndef APP-PLUS-NVUE */
/deep/.u-drawer__scroll-view[data-v-52d4ddd1] {
	padding-top: 40rpx;
}
/deep/.u-drawer-content-visible[data-v-52d4ddd1] {
	height: 100% !important;
}
/deep/.u-drawer[data-v-52d4ddd1] {
	top: unset;
}
	/* #endif */
.container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: #1d2422;
}
.maxTxPlayView {
	width: 750rpx;
	background-color: #111111;
	position: fixed;
	top: 0;
	right: 0;
}

.bottom-box {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	 position: fixed;
	bottom: 120rpx;
	width: 750rpx;
	
	.more-box {
		margin: 0px 40rpx 0 210rpx;
	}
}

.bottom {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction:row;
}
.hour-chart {
	margin: 0 50rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: fixed;
	top: 200rpx;
	
}
.chat-box {
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 36rpx;
	height: 72rpx;
	padding-right: 14rpx;
}
.ui-txt-white {
	color: #ffffff;
	font-size: 26rpx;
}
.chat-icon {
	width: 36rpx;
	height: 36rpx;
	margin: 0 14rpx 0 24rpx;
}
.ui-col {
	display: flex;
	flex-direction: column;
}
.input {
	border-radius: 8rpx;
}
.start-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 280rpx;
	width: 750rpx;
	.startItem{		
		width: 500rpx;
		height: 120rpx;
		background-color: rgba(41, 52, 208, 0.6);	
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.start{
		color: #ffffff;
		font-size: 44rpx;
	}
		
	}
	
}
.ui-txt-message {
	color: #d5d5d5;
}
.unipopup{
	 position: fixed;
	  left: 0;
	  bottom: -20rpx;
}
.fun-group {
	width: 110rpx;
	height: 110rpx;
	background: #2934d0;
	border-radius: 10rpx;
	
	opacity: 0.6;
	display: flex;
	justify-content: center;
	align-items: center;
}
.open-message{
	margin: 0 40rpx;
}

.fun-icon {
	width: 52rpx;
	height: 52rpx;
}

.chat-li {
	display: flex;
	margin-bottom: 8rpx;
	.avatar {
		width: 88rpx;
		height: 88rpx;
		margin-right: 16rpx;
	}
	.chat {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.chatName {
			color: rgba(255, 255, 255, 0.5);
			font-size: 26rpx;
		}
		.chatMessage {
			color: #ffffff;
			font-size: 30rpx;
		}
	}
}
.watchNumber {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	
}
.blue-name {
	position: absolute;
	left: 20rpx;
	top: 15rpx;
	color: #6ebcff;
	font-size: 24rpx;
}

.chatMessage {
	padding: 15rpx 26rpx 14rpx 20rpx;
	border-radius: 26rpx;
	background-color: rgba(0, 0, 0, 0.4);
	lines: 2;
	text-overflow: ellipsis;
	font-size: 24rpx;
	color: #fff;
}

.live-message {
	width: 216rpx;
	height: 80rpx;
	background: rgba(255, 255, 255, 0.3183);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	flex-direction: row;
	display: flex;
	align-items: center;
}

.head-box {
	z-index: 9;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0rpx;
	margin-top:104rpx;
	margin-left:44rpx;
	margin-bottom:44rpx;
}
.follow{
	width: 123rpx;
	height: 56rpx;
	background: #2934D0;
	border-radius: 28rpx 28rpx 28rpx 28rpx;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	.followBox{
		font-size: 24rpx;		
		color: #FFFFFF;
	}
}

.exitButton {
	position: fixed;
	top: 104rpx;
	right: 20rpx;
	width: 118rpx;
	height: 52rpx;
	border-radius: 8rpx;
	text-align: right;
}
.live-head {
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
	margin: 6rpx 14rpx 6rpx 6rpx;
}

.number {
	font-size: 22rpx;
	opacity: 0.56;
}

.roomName {
	lines: 1;
	text-overflow: ellipsis;
}

.audienceList {
	width: 296rpx;
}

.audience {
	background-color: green;
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

/* 设置美颜 */
.share {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 32rpx 32rpx 0 0;
	background-color: #1e2833;
}

.share-top {
	border-radius: 32rpx 32rpx 0 0;
	height: 98rpx;
	padding-left: 53rpx;
	background-color: #0e1924;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.share-top-item {
	margin-right: 61rpx;
	color: #2a5ff8;
}

.share-item {
	padding: 0 53rpx;
	height: 98rpx;
}

.close-scene {
	width: 36rpx;
	height: 36rpx;
	margin-right: 40rpx;
}
.beautyNumber{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 32rpx 32rpx 0 0;
	background-color: #1e2833;
}
.showSlider{
	// position: fixed;
	// left: 100rpx;
	// bottom: 100rpx;
	z-index:12;
	width: 500rpx;
	// background-color: #0a1f44;
	margin-top: 90rpx;
	margin-left: 100rpx;
	height: 200rpx;
}
.top {
	padding: 0 31rpx;
	background-color: #121f2c;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 98rpx;
}

.modal {
	background-color: #0e1924;
}

.ui-bg-blue {
	background-color: green;
}
.hourList {

	width: 750rpx;
	height: 970rpx;
	padding-top: 40rpx;
	background: #ffffff;
	border-radius: 60rpx 60rpx 0rpx 0rpx;
	position: absolute;
	bottom: 0;
	.hourItem {
		.line-box {
			display: flex;
			justify-content: center;
		}
		.itemInfo {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 26rpx 0;
			.rank {
				font-size: 36rpx;
				font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
				font-weight: 400;
				color: #ff8900;
				margin: 0 48rpx;
			}
			.userInfo {
				display: flex;
				align-items: center;
				flex-direction: row;
				margin-right: 126rpx;
				.userAvatar {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					padding: 1px;
					opacity: 1;
					border: 1px solid #ff8900;
					overflow: hidden;
					margin-right: 26rpx;
					.avatarImage {
						width: 108rpx;
						height: 108rpx;
					}
				}
				.user-name {
					font-size: 34rpx;
					font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
					font-weight: 400;
					color: #0a1f44;
				}
			}
			.flow-count {
				font-size: 24rpx;
				font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
				font-weight: 400;
				color: #0a1f44;
			}
		}
		.line {
			background-color: #f2f3f5;
			width: 534rpx;
			height: 2rpx;
			opacity: 1;
		}
	}
}
.foot-content {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column-reverse;

	position: fixed;
	bottom: 350rpx;
	left: 0;
	right: 0;

	height: 500rpx; // 聊天区最高显示的高度
	overflow: hidden;

	padding-top: 20rpx;
	padding-right: 40rpx;
	padding-bottom: 20rpx;
	padding-left: 40rpx;
}
.countDownBox{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	position: fixed;  
	top: 600rpx;
}
.countDown{
	border-radius: 100%;
	width: 228rpx;
	height: 228rpx;
	background: rgba(11,11,11,0.3452);
	display: flex;
	justify-content: center;
	align-items: center;
	
	
	.count{
		font-size: 120rpx;
		font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
		font-weight: 400;
		color: #FFFFFF;
	}
}
</style>
